<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisable"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    center>
    <el-form label-position="left" label-width="100px">
      <el-form-item label="时间范围：">
        <el-date-picker
          v-model="daterange"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="验证码：">
        <el-input v-model="verifyCode" placeholder="请输入验证码" style="width: 200px;"></el-input>
        <el-button type="text" class="codes" @click="getVerifyCodeMethod">{{verifyCodeText}}</el-button>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleConfirm(verifyCode + '' === verifyCodeText + '', verifyCode, daterange.length > 0 ? daterange[0] : '', daterange.length > 1 ? daterange[1] : '')">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'hamburger',
  props: {
    isVisable: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '导出记录'
    },
    getVerifyCode: {
      type: Function,
      default: null
    },
    handleCancel: {
      type: Function,
      required: true
    },
    handleConfirm: {
      type: Function,
      required: true
    }
  },
  computed: {
    getVerifyCodeMethod () {
      if (this.getVerifyCode !== null) {
        return this.getVerifyCode
      }
      return this.defaultGetVerifyCode
    }
  },
  data () {
    return {
      daterange: [],
      verifyCode: '',
      verifyCodeText: ''
    }
  },
  methods: {
    defaultGetVerifyCode () {
      var uid = sessionStorage.getItem('uid') || JSON.parse(sessionStorage.getItem('userInfo')).uid || ''
      request({
        url: '/getOrderRandomString',
        method: 'post',
        params: {
          uid: uid
        }
      }).then((res) => {
        this.verifyCodeText = res.data
      }).catch((err) => {
        console.log(err)
      })
    }
  },
  created () {
    if (this.getVerifyCode !== null) {
      this.getVerifyCode()
    } else {
      this.defaultGetVerifyCode()
    }
  }
}
</script>

<style scoped>
@font-face {
  font-family: 'code';   /*字体名称*/
  src: url('./font/BTTTRIAL.otf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
.codes {
  font-family: 'code';
  width: 100px;
  height: 50px;
  margin-left: 40px;
  font-size: 22px;
  letter-spacing: 8px;
  background-color: #eeeeee;
}
</style>
